@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.ttf');
}

@font-face {
  font-family: 'DMSans-Medium';
  src: url('../fonts/DMSans-Medium.ttf');
}

@font-face {
  font-family: 'DMSans-Bold';
  src: url('../fonts/DMSans-Bold.ttf');
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf');
}

/* * {
  touch-action: pan-y;
} */
body,
.page {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently not supported by any browser */
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  /* padding-top: 1px; */
  font-size: 0.16rem;
  /* background-color: rgba(242, 238, 237, 1); */
  background-color: rgba(235, 235, 235, 1);
}

.tab-row {
  position: fixed;
  top: 24px;
  width: 100%;
  height: 18.7vw;
  /* background-color: rgba(242, 238, 237, 1); */
  background-color: rgba(235, 235, 235, 1);
  z-index: 2;
}

.tabs {
  position: absolute;
  width: 91.5%;
  height: 54.3%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e2e2e2;
  mix-blend-mode: normal;
  border-radius: 0.18rem;
}

.day {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 0.9%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  /* color: rgba(255, 90, 69, 1); */
  color: rgba(66, 152, 181, 1);
}

.line_1 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 25.29%;
  top: 50%;
  transform: translate(0, -50%);
  background: rgba(255, 255, 255, 1);
  border-radius: 0.5px;
}

.week {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 25.43%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  /* color: rgba(255, 90, 69, 1); */
  color: rgba(66, 152, 181, 1);
}

.line_2 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 49.85%;
  top: 50%;
  transform: translate(0, -50%);
  background: rgba(255, 255, 255, 1);
  border-radius: 0.5px;
}

.month {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  left: 50%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  /* letter-spacing: -0.084px; */
  /* color: rgba(255, 90, 69, 1); */
  color: rgba(66, 152, 181, 1);
}

.line_3 {
  position: absolute;
  width: 1px;
  height: 25%;
  left: 74.44%;
  top: 50%;
  transform: translate(0, -50%);
  background: rgba(255, 255, 255, 1);
  border-radius: 0.5px;
}

.year {
  position: absolute;
  width: 24.49%;
  height: 84.2%;
  right: 0.9%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  /* letter-spacing: -0.084px; */
  /* color: rgba(255, 90, 69, 1); */
  color: rgba(66, 152, 181, 1);
}

.tab-text {
  position: absolute;
  width: max-content;
  font-size: 16px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.active {
  width: 25%;
  height: 84.2%;
  /* background: rgba(255, 90, 69, 1); */
  background: rgba(66, 152, 181, 1);
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.12);
  border-radius: 0.32rem;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;
  /* identical to box height */
  text-align: center;
  letter-spacing: -0.084px;
  color: #ffffff;
  z-index: 99;
}

.swiper-container,
.swiper-wrapper {
  position: relative;
  width: 100%;
  margin-top: 12%;
  /* height: max-content; */
}

.topstyle {
  margin-top: 23%;
}

.swiper-wrapper {
  height: auto !important;
}

.swiper-slide {
  height: 1000px;
}

/* 随意指定一个height值即可,高度tab页自适应 */
.swiper-slide-active {
  height: auto;
}

.card_1,
.card2_1,
.card2_2,
.card3_1,
.card4_1,
.card5_1,
.card_week_1 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: 51.7vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
}

.card_1 {
  height: 56.53vw;
}

.card_week_1 {
  height: 56.8vw;
}

.card2_1 {
  height: 34.7vw;
  display: none;
}

.card_2,
.card_2_2 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: 74.4vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
  padding-top: 1px;
}

.card2_2 {
  height: 25.33vw;
}

.card_chart {
  position: relative;
  width: 100%;
  height: 30%;
  margin: 0;
  padding: 0;
}

.card_3 {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  margin-bottom: 4.3vw;
  width: 91.5%;
  height: max-content;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
  padding-top: 1px;
}

.title-row-top {
  position: fixed;
  top: 0;
  padding: 10px 0px;
  width: 100%;
  height: 27px;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 21px;
  line-height: 27px;
  text-align: center;
  /* background-color: rgba(242, 238, 237, 1); */
  background-color: rgba(235, 235, 235, 1);
  color: rgba(66, 92, 117, 1);
  z-index: 2;
}

.title-row {
  position: relative;
  width: 100%;
  height: 36%;
}

.title-row2 {
  position: relative;
  width: 100%;
  height: 55.4%;
}

.title-row4 {
  position: relative;
  width: 100%;
  height: 50%;
}

.img {
  position: absolute;
  width: 10.7vw;
  height: 10.7vw;
  left: 4.7%;
  top: 45%;
  transform: translate(0, -50%);
}

.title-text-day,
.title-text-week {
  position: absolute;
  left: 21%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  /* line-height: 0.36rem; */
  /* identical to box height */

  color: rgba(66, 92, 117, 1);
}

.title-text-week1,
.title-text-week2,
.title-text-week3 {
  position: absolute;
  left: 21%;
  top: 40%;
  transform: translate(0, -50%);
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  /* line-height: 0.36rem; */
  /* identical to box height */

  /* color: #093147; */
  color: rgba(66, 92, 117, 1);
}

.title-text-week3 {
  top: 50%;
}

.card-line {
  position: absolute;
  left: 50%;
  top: 43.1%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}

.card-line-week {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}

.card-line2 {
  position: absolute;
  left: 50%;
  top: 55.4%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}

.card-line4 {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}

.card-line5 {
  position: absolute;
  left: 50%;
  top: 64px;
  width: 90.7%;
  height: 2px;
  background: rgba(239, 240, 240, 1);
  transform: translate(-50%, 0);
}

.stage-row {
  position: relative;
  margin: 0 auto;
  margin-top: 2%;
  width: 100%;
  height: 12.4%;
  /* border: 1px solid #000; */
}

.deep {
  margin-top: 9%;
}

.deep-alone {
  margin-top: 5%;
}

.deep-week {
  margin-top: 9%;
}

.deep-dot,
.light-dot,
.awake-dot {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 3.2vw;
  height: 3.2vw;
  background: #2654a6;
  border-radius: 4px;
}

.deep-text,
.light-text,
.awake-text {
  position: absolute;
  left: 12.8%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1);
}

.deep-data,
.light-data,
.awake-data,
.deep-data_2,
.light-data_2,
.awake-data_2,
.deep-data3,
.light-data3,
.awake-data3 {
  position: absolute;
  right: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.deep-data2 {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 24px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

#deep-data2,
#deep-data3 {
  left: 4.7%;
}

.detail-title {
  position: relative;
  width: 90.7%;
  height: max-content;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  /* text-align: justify; */
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.detail-content {
  position: relative;
  width: 90.7%;
  height: max-content;
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  padding-bottom: 16px;
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.subtext-week {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 21%;
  top: 26%;
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 21px;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.lab {
  position: absolute;
  right: 4.1%;
  top: 46%;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
}

.adjust {
  margin-top: 1.5%;
}

.deep-week {
  margin-top: 9%;
}

.chart {
  position: relative;
  width: 96%;
  height: 84%;
  margin-top: 7%;
}

.chart-title {
  position: absolute;
  top: 5.7%;
  right: 4.7%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  text-align: right;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1);
}

.time-row {
  position: absolute;
  top: 3%;
  left: 0;
  width: 100%;
  height: 10%;
}

.left-time {
  position: absolute;
  top: 50%;
  left: 15%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  transform: translate(0, -50%);
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.right-time {
  position: absolute;
  top: 50%;
  right: 5%;
  width: max-content;
  height: max-content;
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  transform: translate(0, -50%);
  /* color: #093147; */
  color: rgba(66, 92, 117, 1)
}

.text-adjust {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-family: DM Sans;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  color: #093147;
}

.text-tow {
  position: relative;
  width: 100%;
  height: max-content;
}

.row {
  position: relative;
  width: 100%;
  height: 6.4vw;
  margin-top: 4%;
}

.snore_time {
  position: absolute;
  left: 4.7%;
  font-size: 14px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: left;
  color: #093147;
}

.time_length {
  position: absolute;
  right: 4.7%;
}

.snoretips_card {
  position: relative;
  display: block;
  margin: 0 auto;
  margin-top: 4.3vw;
  width: 91.5%;
  height: max-content;
  padding-bottom: 16px;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 24px;
}

.top-row {
  position: relative;
  width: 100%;
  height: 64px;
}

.snore_img {
  position: absolute;
  left: 4.7%;
  top: 50%;
  transform: translate(0, -50%);
  width: 14.9vw;
  height: 8.53vw;
}

.top-text {
  position: absolute;
  left: 25.7%;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 18px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
}

.tips-content {
  position: relative;
  width: 91.5%;
  height: max-content;
  margin: 0 auto;
  margin-top: 4%;
  font-size: 18px;
  font-family: DM Sans;
  font-weight: 400;
  text-align: left;
  color: #093147;
}

.hrvcard {
  position: relative;
  display: none;
  width: 91.5%;
  height: 68.5vw;
  margin: 0 auto;
  margin-top: 4.3vw;
  background: #ffffff;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.06);
  border-radius: 0.24rem;
}

.size1 {
  height: 68.5vw;
}

.size2 {
  height: 60.8vw;
}

.size3 {
  height: 135.7vw;
}

.hrv_title {
  position: absolute;
  top: 8%;
  left: 50%;
  width: max-content;
  transform: translate(-50%, 0);
  font-size: 18px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}

.hrv_line {
  position: absolute;
  top: 45.45%;
  left: 50%;
  width: 93.2%;
  height: 2px;
  transform: translate(-50%, 0);
  background: #eff0f0;
}

.hrv_num_1,
.hrv_num_2,
.hrv_num_3,
.hrv_num_4 {
  position: absolute;
  top: 23.8%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 24px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}

.hrv_text {
  position: absolute;
  top: 53.8%;
  left: 50%;
  width: 93.2%;
  transform: translate(-50%, 0);
  text-align: center;
  font-size: 16px;
  line-height: 23px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: left;
  color: #093147;
}

.hrv_week_title {
  position: absolute;
  width: max-content;
  left: 50%;
  top: 3.1%;
  transform: translate(-50%, 0);
  font-size: 16px;
  font-family: DMSans-Bold;
  font-weight: normal;
  text-align: CENTER;
  color: #093147;
}

.hrv_week_num1,
.hrv_week_num2,
.hrv_week_num3,
.hrv_week_num4,
.hrv_month_num1,
.hrv_month_num2,
.hrv_month_num3,
.hrv_month_num4 {
  position: absolute;
  top: 9%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 24px;
  font-family: DM Sans;
  font-weight: bold;
  text-align: CENTER;
  color: #093147;
}

.hrv-line-week {
  position: absolute;
  top: 24.9%;
  left: 50%;
  width: 93.2%;
  height: 2px;
  transform: translate(-50%, 0);
  background: #eff0f0;
}

.hrv_week_lab {
  position: absolute;
  left: 50%;
  top: 16.7%;
  transform: translate(-50%, 0);
  font-size: 14px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
  letter-spacing: 0px;
}

.hrv_week_daterow {
  position: absolute;
  right: 4.7%;
  top: 28.16%;
  font-size: 14px;
  font-family: DM Sans;
  font-weight: bold;
  text-align: RIGHT;
  color: #093147;
}

.hrv_week_chart {
  position: absolute;
  width: 92.6%;
  height: 44.5%;
  left: 50%;
  top: 32.1%;
  transform: translate(-50%, 0);
}

.hrv_week_tips {
  position: absolute;
  width: 90.6%;
  top: 78.8%;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 16px;
  font-family: DM Sans;
  font-weight: normal;
  text-align: LEFT;
  color: #093147;
}

.time-toprow {
  position: fixed;
  top: 0;
  width: 100%;
  height: max-content;
  padding: 0% 0 0 0;
  text-align: center;
  /* background: rgba(242, 238, 237, 1); */
  background-color: rgba(235, 235, 235, 1);
  font-size: 16px;
  line-height: 24px;
  font-family: DM Sans;
  font-weight: normal;
  /* color: #093147; */
  color: rgba(66, 92, 117, 1);
  z-index: 2;
}

.title-row {
  font-family: DMSans-Bold;
  font-style: normal;
  font-weight: normal;
  font-size: 21px;
  line-height: 27px;
  text-align: center;
  padding: 10px 0 5px 0;
  color: #093147;
}

.daychart_sleepstage_x {
  position: relative;
  margin-top: -4%;
  width: 86%;
  height: 21px;
  padding-left: 12%;
  padding-right: 2%;
  color: rgba(66, 92, 117, 1);
}

.daychart_sleepstage_x2 {
  position: relative;
  margin-top: -12%;
  width: 86%;
  height: 21px;
  padding-left: 12%;
  padding-right: 2%;
  color: rgba(66, 92, 117, 1)
}

.xlabel_1 {
  float: left;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.xlabel_4 {
  float: right;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.xlabel_2 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 41%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.xlabel_3 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 67%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.chart_week_x {
  position: relative;
  margin-top: -5%;
  width: 80%;
  height: 21px;
  padding-left: 12%;
  padding-right: 2%;
  color: rgba(66, 92, 117, 1);
}

.week_xlabel_1 {
  float: left;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.week_xlabel_4 {
  float: right;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.week_xlabel_2 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 41%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.week_xlabel_3 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 67%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.chart_month_x {
  position: relative;
  margin-top: -5%;
  width: 80%;
  height: 21px;
  padding-left: 12%;
  padding-right: 2%;
  color: rgba(66, 92, 117, 1);
}

.month_xlabel_1 {
  float: left;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.month_xlabel_4 {
  float: right;
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.month_xlabel_2 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 41%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.month_xlabel_3 {
  position: absolute;
  width: max-content;
  height: max-content;
  left: 67%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.chart_year_x,
.chart_year_x2,
.chart_year_x3,
.chart_year_x4 {
  position: relative;
  margin-top: -5%;
  width: 80%;
  height: 21px;
  padding-left: 12%;
  padding-right: 2%;
  color: rgba(66, 92, 117, 1);
}

.year_xlabel_1 {
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x2label_1 {
  position: absolute;
  left: 37%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x2label_2 {
  position: absolute;
  left: 71%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x3label_1 {
  position: absolute;
  left: 24%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x3label_2 {
  position: absolute;
  left: 53%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x3label_3 {
  position: absolute;
  left: 83%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x4label_1 {
  position: absolute;
  left: 18%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x4label_2 {
  position: absolute;
  left: 41%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x4label_3 {
  position: absolute;
  left: 66%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

.year_x4label_4 {
  position: absolute;
  left: 91%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max-content;
  height: max-content;
  font-size: 14px;
  font-weight: '400';
  font-family: 'DM Sans';
  line-height: 21px;
}

@media screen and (min-width: 768px) {

  .title-text-week1,
  .title-text-week2,
  .title-text-week3 {
    transform: translate(0, -90%);
  }

  .card-line {
    position: absolute;
    left: 50%;
    top: 35.1%;
    width: 90.7%;
    height: 2px;
    background: rgba(239, 240, 240, 1);
    transform: translate(-50%, 0);
  }

  .tabs {
    width: 60%;
    height: 4.6vw;
  }

  .tab-text {
    font-size: 15px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: CENTER;
    letter-spacing: 0px;
  }

  .tab-row {
    height: 10.3vw;
  }

  .card_1,
  .card_2,
  .card_3,
  .card_week_1,
  .card2_1,
  .card2_2,
  .card3_1,
  .hrvcard {
    width: 65.9%;
    height: 23.3vw;
    margin-top: 2%;
    border-radius: 24px;
    box-shadow: 0px 2px 6px 0px undefined;
  }

  .size1 {
    height: 28.3vw;
  }

  .size3 {
    height: 55.3vw;
  }

  .card_week_1 {
    height: 30.2vw;
  }

  .card_1,
  .card_week_1,
  .card3_1 {
    margin-top: 6.7vw;
  }

  .card3_1 {
    height: 11.6vw !important;
  }

  .card_2 {
    height: 33.5vw;
  }

  .card_3 {
    height: 19.3vw;
  }

  .card2_1,
  .card2_2 {
    margin-top: 6.7vw;
    height: 15.6vw;
  }

  .detail-title {
    margin-top: 2.2%;
    font-size: 16px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    line-height: 22px;
  }

  .detail-content {
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    line-height: 22px;
  }

  .title-text-day,
  .title-text-week1,
  .title-text-week2,
  .title-text-week3 {
    left: 16%;
    font-size: 24px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    /* color: #093147; */
    color: rgba(66, 92, 117, 1);
  }

  .img {
    width: 4.8vw;
    height: 4.8vw;
  }

  .deep {
    margin-top: 2%;
  }

  .deep-text,
  .light-text,
  .awake-text {
    font-size: 18px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }

  .deep-dot,
  .light-dot,
  .awake-dot {
    width: 1.5vw;
    height: 1.5vw;
    border-radius: 4px;
  }

  .deep-data,
  .light-data,
  .awake-data,
  .deep-data_2,
  .light-data_2,
  .awake-data_2,
  .deep-data3,
  .light-data3,
  .awake-data3 {
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: RIGHT;
    /* color: #093147; */
    color: rgba(66, 92, 117, 1)
  }

  #deep-data2,
  #deep-data3 {
    top: 109%;
  }

  .subtext-week {
    left: 16.5%;
    top: 18%;
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: RIGHT;
    color: rgba(66, 92, 117, 1);
  }

  .deep-week {
    margin-top: 6.5%;
  }

  .lab {
    right: 5.1%;
    top: 39%;
    font-size: 12px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: RIGHT;
    color: rgba(66, 92, 117, 1);
  }

  .chart-title {
    top: 4.7%;
    font-size: 12px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: RIGHT;
    color: rgba(66, 92, 117, 1);
  }

  .deep-data2 {
    left: 6%;
    top: 109%;
    font-size: 16px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: CENTER;
    /* color: #093147; */
    color: rgba(66, 92, 117, 1)
  }

  .card_chart {
    margin-top: 2.5% !important;
  }

  .chart {
    margin-top: 5%;
  }

  .subtext-week {
    top: 28% !important;
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
    letter-spacing: 0px;
  }

  .snore_img {
    width: 9.7vw;
    height: 5.7vw;
  }

  .tips-content {
    font-size: 14px;
    font-family: DM Sans;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }

  .top-text {
    font-size: 16px;
    font-family: DMSans-Bold;
    font-weight: normal;
    text-align: LEFT;
    color: #093147;
  }
}